<template>
  <div>
    <h1>欢迎注册</h1>
    <img :src="imgUrl" alt="" @click="genghuan" />
    <van-cell-group>
      <van-field
        v-model="img_code"
        required
        label="文本"
        placeholder="请输入图片验证码"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="mobile"
        required
        label="文本"
        placeholder="请输入手机号"
      />
    </van-cell-group>
    <van-button type="primary" @click="send" :disabled="flag">{{
      message
    }}</van-button>
    <van-cell-group>
      <van-field
        v-model="sms_code"
        required
        label="文本"
        placeholder="请输入验证码"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="password"
        required
        label="文本"
        placeholder="请输入密码"
      />
    </van-cell-group>
    <van-button @click="choseusertype">我是雇主</van-button>
    <van-button @click="choseusertype1">我是服务商</van-button> <br />
    <van-button type="primary" @click="register">注册</van-button>
  </div>
</template>

<script>
import { v4 as uuid4 } from "uuid";
export default {
  data() {
    return {
      imgUrl: "",
      uuid: "",
      mobile: "",
      sms_code: "",
      img_code: "",
      user_type: "",
      message: "发送验证码",
      time: 60,
      flag: false,
      password:''
    };
  },
  methods: {
    genghuan() {
      this.uuid = uuid4();
      this.imgUrl = "http://localhost:5000/img_code?uuid=" + this.uuid;
    },
    send() {
      this.axios
        .get("/sms_code", {
          params: {
            mobile: this.mobile,
            uuid: this.uuid,
            img_code: this.img_code,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            alert(res.data.msg);
            this.flag = true;
            var t = setInterval(() => {
              if (this.time == 0) {
                clearInterval(t);
                this.time = 60;
                this.message = "发送验证码";
                this.flag = false;
              } else {
                this.time--;
                this.message = this.time + "秒";
              }
            }, 1000);
          } else {
            alert(res.data.msg);
          }
        });
    },
    choseusertype() {
      this.user_type = 1;
      alert(this.user_type);
    },
    choseusertype1() {
      this.user_type = 2;
      alert(this.user_type);
    },
    register() {
      this.axios
        .post("/register", {
          mobile: this.mobile,
          sms_code: this.sms_code,
          user_type: this.user_type,
          password:this.password
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            alert(res.data.msg);
            this.$router.push('/login')
          }
        });
    },
  },
  mounted() {
    this.genghuan();
  },
};
</script>

<style>
</style>